<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <h3>财务数据</h3>
      </div>
    </template>
    <el-row :gutter="16">
      <el-col :span="8" v-for="(item, index) in financeStats" :key="index">
        <div class="finance-item">
          <div class="finance-icon" :style="{ color: item.color }">
            <el-icon :size="20"><component :is="getIcon(item.icon)" /></el-icon>
          </div>
          <div class="finance-info">
            <div class="finance-title">{{ item.name }}</div>
            <div class="finance-count">{{ item.count }} 笔</div>
            <div class="finance-amount">¥ {{ item.amount_format }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'

  interface FinanceItem {
    name: string
    count: number
    amount: number
    amount_format: string
    color: string
    icon: string
  }

  interface Props {
    financeStats: FinanceItem[]
  }

  const props = defineProps<Props>()

  // 获取图标组件
  const getIcon = (iconName: string) => {
    // Element Plus 图标名称映射
    const iconMap: Record<string, any> = {
      'pay-circle': ElementPlusIconsVue.CircleCheck,
      'file-done': ElementPlusIconsVue.DocumentChecked,
      'file-add': ElementPlusIconsVue.DocumentAdd,
      user: ElementPlusIconsVue.User,
      'file-text': ElementPlusIconsVue.Document,
      'shopping-cart': ElementPlusIconsVue.ShoppingBag,
      'check-circle': ElementPlusIconsVue.CircleCheck,
      scale: ElementPlusIconsVue.HomeFilled, // 临时替代
      'user-add': ElementPlusIconsVue.User, // 临时替代
      calendar: ElementPlusIconsVue.Calendar,
      edit: ElementPlusIconsVue.Edit,
      document: ElementPlusIconsVue.Document,
    }
    return iconMap[iconName] || ElementPlusIconsVue.User
  }
</script>

<style scoped lang="scss">
  .content-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }

  .finance-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #f5f7fa;
    border-radius: 8px;
  }

  .finance-icon {
    font-size: 20px;
  }

  .finance-info {
    flex: 1;
  }

  .finance-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 4px;
  }

  .finance-count {
    font-size: 12px;
    color: #909399;
    margin-bottom: 2px;
  }

  .finance-amount {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
</style>
